
window.onload = function() {  
    var paper = new Raphael(document.getElementById('canvas_container'), 500, 500);  
    var points = [];
    stars = loadStars();
    drawStars (paper, stars);
    var angle = $("#axis_angle").html();
    drawAxis(paper, 250, 250, angle-0, 200, "Y");
    drawAxis(paper, 250, 250, angle-90, 200, "Z");
    drawGuides(paper, angle);
    drawDevices (paper, angle);
}  

function drawGuides (p, a) {
    var s = 16;
    var r = p.rect (250-s/2,250-s/2, s,s);
    r.translate (60,0);
    r.rotate (a-66,190,250);
    var r1 = r.clone();
    r1.rotate (120,190,250);
    var r2 = r1.clone();
    r2.rotate (120,190,250);
}

function drawDevices (p,a) {
    drawDevice (p, 30-a, "uves");
    drawDevice (p, 150-a, "vuves");
    drawDevice (p, 270-a, "lss");

}

function drawDevice (p, a, text) {
    var x = 250 + 50*Math.cos(a*1.7453292519943295e-2);
    var y = 250 - 50*Math.sin(a*1.7453292519943295e-2);
    var c = p.circle (x, y, 5);
    c.attr("fill", "#0f0");
    p.text (x, y+8, text);
}

function drawStars (p, stars) {
    var drawStar = function (star) {
	var c = p.circle(star.x, star.y, 30/star.mag);
	if (star.guide == true) {
	    c.attr("fill", "#f00");
	} else {
	    c.attr("fill", "#00f");
	}
    };
    for (var i in stars) {
	drawStar (stars[i]);
    }
} 

loadStars = function () {
    var stars = [];
    $("#stars tbody tr").each(function () {
        var ra  = $(this).find("#ra").html();
    	var dec = $(this).find("#dec").html();
	var mag = $(this).find("#mag").html();
	var x   = $(this).find("#x").html();
	var y   = $(this).find("#y").html();
    	stars.push ({ra:ra, dec:dec, mag:mag, x:x, y:y, guide:true});
    });
    $("#stars1 tbody tr").each(function () {
        var ra  = $(this).find("#ra").html();
    	var dec = $(this).find("#dec").html();
	var mag = $(this).find("#mag").html();
	var x   = $(this).find("#x").html();
	var y   = $(this).find("#y").html();
    	stars.push ({ra:ra, dec:dec, mag:mag, x:x, y:y, guide:false});
    });
    
    return stars;
}

function drawAxis (paper, x0, y0, angle, size, text) {
    var st = paper.set();
    st.push (
	paper.path("M 0 0 l 100 0"),
	paper.path("M 100 0 L 90 5 L 90 -5 z"),
	paper.text (95, 10, text) 
    );
    st.translate (x0,y0);
    st.rotate (angle, 0,0);
    st.scale (size/100, size/100, 0,0);
    return (st);
}